<template>
    <div>
        <!-- 表格表头 -->
        <div class="table-header">
            <div>
                <!-- <el-button-group>
                    <el-button icon="el-icon-circle-plus-outline" size="small"
                        @click="selectUserDailog(userRoleForm.pkOrg,userRoleForm.roleId)">关联用户</el-button>
                    <el-button icon="el-icon-remove-outline" size="small" @click="deleteHandle()">删除用户</el-button>
                </el-button-group> -->
            </div>
            <div>
                <el-button size="small" round icon="el-icon-refresh" @click="getUserRoleList()"></el-button>
            </div>
        </div>

        <el-table :data="userroleList" size="small" min-height="300" style="width: 100%" highlight-current-row>
            <el-table-column property="groupName" label="用户所属集团"></el-table-column>
            <el-table-column property="orgName" label="用户所属组织"></el-table-column>
            <el-table-column property="roleName" label="角色标识">
                <template slot-scope="scope">
                    <span style="color:#409EFF;cursor: pointer;"
                        @click="showRespDailog(scope.row.roleId)">{{scope.row.roleName}}</span>
                </template>
            </el-table-column>
            <el-table-column property="roleDescription" label="角色描述"></el-table-column>
            <el-table-column property="enabledate" label="有效期"></el-table-column>
            <el-table-column property="disabledate" label="失效期"></el-table-column>

            <div slot="empty">
                <div class="avue-empty">
                    <div class="avue-empty__image" style="height: 50px;"><img
                            src=""
                            alt=""></div>
                    <p class="avue-empty__desc">暂无数据</p>
                </div>
            </div>
        </el-table>

        <!-- 职责 -->
        <resp-tab v-if="respTabVisible" ref="respTab"></resp-tab>
        <!--选择用户弹出框  -->
        <!-- <usergroup v-if="usergroupVisible" ref="usergroup" @refreshDataList="getUserRoleList"></usergroup> -->
    </div>

</template>
<script>
    import RespTab from './responsibility-tab'
    import * as roleService from '@/api/upms/role'
    export default {
        data() {
            return {
                userRoleForm: {
                    userId: ''
                },
                userroleList: [],
                respTabVisible: false,
            }
        },
        components: {
            RespTab
        },
        methods: {
            init(userId) {
                if (userId) {
                    console.log(userId)
                    this.userRoleForm.userId = userId;
                    this.getUserRoleList()
                }
            },
            showRespDailog(id) {
                this.respTabVisible = true
                this.$nextTick(() => {
                    this.$refs.respTab.init(id)
                })
            },
            // 默认加载用户角色授权列表
            getUserRoleList() {
                console.log("23234")
                roleService.getuserroleinfo(this.userRoleForm.userId).then(data => {
                    this.userroleList = data
                })
            },
        }
    }
</script>